
function getFriendList2() {
    $.ajax({
        type: "get",
        url: "friendList",
        success: function(body) {
            // 1.先把之前的好友列表内容清空
            let firendListUL2 = $("#friend-list");
            firendListUL2.innerHTML = '';
            // 2.遍历body, 把服务器响应的结果, 添加到当前的 friend-list 中
            for(let friend of body) {
                let li = '';
                li +='<li>';
                li +='<h4 friend-id="' + friend.friendId + '">' + friend.username + '</h4>';
                li +='</li>';
                
                firendListUL2.appendChild(li);
                li.onclick() = function() {
                    clickFriend(friend);
                }
            }
        }
        
    });
}

// 从服务器获取到会话列表数据
function getSessionList2() {
    $.ajax({
        type: 'get',
        url: 'sessionList',
        success: function(body) {
            // 清空之前的会话记录
            let sessionListUL = $("#session-list");
            sessionListUL.innerHTML = '';

            // 把每一个会话取出来构造对应的会话内容
            for(let session of body) {
                let sessionId = session.sessionId;
                let friend = session.friend;
                let lastMessage = session.lastMessage;

                // 对 lastMessage 的长度进行截断处理
                if(lastMessage.length > 10) {
                    lastMessage = lastMessage.substring(0,10) + "...";
                }

                // 构造左侧会话预览框内容
                let li = $("li");
                li.setAttribute('message-session-id', sessionId);
                li.innerHTML = '';
                li.innerHTML += '<ul class="list" id="session-list">';
                li.innerHTML += '<li>';
                li.innerHTML += '<h3>' + friend[0].friendName + '</h3>';
                li.innerHTML += '<p>' + lastMessage + '</p>';
                li.innerHTML += '</li>';
                li.innerHTML += '</ul>';
                
                sessionListUL.appendChild(li);

                // 对每个会话添加点击事件 (左侧会话预览框变色, 右侧聊天界面切换)
                li.onclick = function() {
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList2();

// 会话预览框点击事件
function clickSession(li) {
    // 设置高亮
    let allLis = $("#session-list>li");
    activeSession(allLis, li);

    // 获取指定会话历史消息,以便右侧聊天内容构造 TODO
    let sessionId = li.getAttribute("message-session-id");
    getHistoryMessage2(sessionId);
}

// 将选中会话预览框设置为高亮, 将其他会话预览框设置为不高亮
function activeSession(allLis, currentLi) {
    for(let li of allLis) {
        if( li == currentLi) {
            li.className = 'selected';
        }else {
            li.className = '';
        }
    }
}


// 点击好友列表项中的好友,触发的函数
function clickFriend(friend) {
    //  先判定当前好友是否已有对应的会话
    let sessionLi = findFriendByName(friend.friendName);
    let sessionLiUL = $("#sesison-list");
    if(sessionLi != null) {
        // 当前好友已有会话
        // 将其设置为 置顶, 高亮, 获取历史消息
        sessionLiUL.insertBefore(sessionLi, sessionLiUL.children[0]);
        sessionLi.click();
    }else {
        // 当前好友没有会话
        // 创建对应会话, 置顶, 高亮, 获取历史消息
        sessionLi = document.createElement("li");
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        sessionLiUL.insertBefore(sessionLi, sessionLiUL.children[0]);
        sessionLi.onclick = function() {
            clickSession(sessionLi);
        }
        // 将会话信息发送给服务器
        createSession(friend.friendId, sessionLi);
    }
    // 页面切换到会话列表 (点击好友前在好友列表)
    let tabSession = $('.tab .tab-session');
    tabSession.click();

}

//  先判定当前好友是否已有对应的会话
function findFriendByName(username) {
    // 获取会话列表所有标签 
    // 看对应的 h3 标签里内容是否有和 username 对应的
    let sessionLis = $('#session-list>li');
    for(let sessionLi of sessionLis) {
        let h3 = sessionLi.querySelect('h3');
        if(h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}


// 将会话信息发送给服务器
function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: 'session?toUserId=' + friendId,
        success: function(body) {
            console.log('会话创建成功! sessionId:' + body.sessionId);
            sessionLi.setAttribute('message-session-id', body.sessionId);
        },
        error: function(body) {
            console.log('会话创建失败! ');
        }
    });
}


// =============================================================
// ======
// =============================================================

















































